<template>
	<div class="flex-center">
		<el-card class="personal-center-box">
			<p slot="title" class="title">关于我</p>
			<div>
				<div class="flex-center avatar-bar">
					<div class="" style="position: relative;width: 72px;height: 72px;">
						<el-avatar class="avatar-image el-icon-user-solid" icon="" :size="72" />
						<span
							:class="[
								ruleForm.emp.gender ? 'el-icon-male gender-icon man-icon' : 'el-icon-female gender-icon woman-icon'
							]"
						></span>
					</div>
					<h3>{{ ruleForm.emp.name || '无' }}</h3>
				</div>
				<div class="user-message-bar">
					<div>
						<i style="font-size: 18px" class="el-icon-reading margin-right-10"></i>
						<span>基本信息</span>
					</div>
					<el-button size="mini" type="primary" plain class="el-icon-edit-outline" @click="onUpdatePwdBtn"> 修改密码</el-button>
				</div>
				<el-form ref="ruleForm" :model="ruleForm" label-width="60px" label-position="right">
					<el-form-item label="编号:" class="margin-bottom-0">{{ ruleForm.emp.code }}</el-form-item>
					<el-form-item label="性别:" class="margin-bottom-0">{{ ruleForm.emp.gender === 0 ?'女' : '男' }}</el-form-item>
					<el-form-item label="岗位:" class="margin-bottom-0"><span>{{ ruleForm.emp.postName || '无' }}</span></el-form-item>
					<el-form-item label="班组:" class="margin-bottom-0"><span>{{ ruleForm.emp.groupName || '无' }}</span></el-form-item>
					<el-form-item label="车间:" class="margin-bottom-0"><span>{{ ruleForm.emp.workshopName || '无' }}</span></el-form-item>
					<el-form-item label="部门:" class="margin-bottom-0"><span>{{ ruleForm.emp.deptName || '无' }}</span></el-form-item>
					<el-form-item label="手机:" class="margin-bottom-0"><div>{{ ruleForm.emp.mobile || '无' }}</div></el-form-item>
				</el-form>
			</div>
		</el-card>
		<update-pwd-dialog
			:user-id="ruleForm.user.id"
			:dialog-state="updatePwdDialogState"
			@on-visible-change="onVisibleChangeOfUpdatePwdDialogState"
		></update-pwd-dialog>
	</div>
</template>
<script>
    import { getInfo } from '../../api/login';
    import updatePwdDialog from './update-pwd-dialog';
    export default {
        components: {
            updatePwdDialog
        },
        data() {
            return {
                updatePwdDialogState: false,
                ruleForm: {
                    emp: {},
                    user: {}
                }
            };
        },
        mounted() {
            this.getUserInfoRequest();
        },
        methods: {
            onVisibleChangeOfUpdatePwdDialogState(e) {
                this.updatePwdDialogState = e;
            },
            onUpdatePwdBtn() {
                this.updatePwdDialogState = true;
            },
            getUserInfoRequest() {
                return getInfo().then(res => {
                    if (res.data.status === 200) {
                        const resData = res.data.res || {};
                        resData.emp = resData.emp || {};
                        resData.user = resData.user || {};
                        this.ruleForm = resData;
                    }
                });
            }
        }
    };
</script>
<style scoped lang="scss">

.personal-center-box {
    width: 400px;
    height: calc(100vh - 200px);
    border-radius: 10px;
}
.avatar {
    width: 100%;
    height: 100%;
}
.title {
    border-bottom: 1px solid #e8eaec;
    padding: 14px 16px;
    line-height: 1;
}
.about-me {
    width: 350px;
}
.avatar-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 150px;
    margin-top: 20px;
    .gender-icon {
        font-size: 22px;
        position: absolute;
        right: -20px;
        top: 0;
    }
    .man-icon {
        color: #2d8cf0;
    }
    .woman-icon {
        color: deeppink;
    }
}
.avatar-bar >>> .el-avatar>img {
    display: block;
    width: 100%;
    height: 100%;
    vertical-align: middle;
}
.avatar-image {
    font-size: 44px;
    border-radius: 100%;
    border: 1px solid #dfe6ec;
}
.modify-avatar-icon {
    cursor: pointer;
    position: absolute;
    bottom: 0;
    right: -20px;
    font-size: 18px;
}
.modify-avatar-icon:hover {
    color: #2b85e4;
}
.user-message-bar {
    border-bottom: 1px solid #e8eaec;
    margin-bottom: 20px;
    padding-bottom: 8px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

</style>
